<template>
	<view class="container p20">


		<view class="content">
			<view class="mb20">
				产品名称:{{ datails.specsDetail || '' }}
			</view>

			<view class="jBetween mb20">
				<!-- <view class="">
					当前{{ packingMethod == 1 ? '热收缩' : '烟封' }}数量: {{ datails.packingInNumber || 0 }}
				</view> -->
				<view class="">
					当前组装数量:{{ datails.inNumber || 0 }}
				</view>

				<u-checkbox-group v-model="checked" placement="column">
					<u-checkbox shape="circle" name="checked" label="此工序完结"></u-checkbox>
				</u-checkbox-group>
			</view>


			<view class=" flex" style="margin-top: 50rpx;">
				<view class="flex-1">
					<u-button @click="handleAdd" type="success" text="添加组装工费"></u-button>
				</view>
				<view class="flex-1 " style="margin: 0 30rpx;">
					<u-button @click="handleCargoDamage" type="warning " text="添加货损信息"></u-button>
				</view>
				<view class="flex-1">
					<u-button @click="handleProcessCompletion" type="primary " text="提交"></u-button>
				</view>
			</view>

			<!-- 添加工费 -->
			<!-- @open="open" -->
			<u-popup :show="addShow" mode="center" @close="handleAddClose" :closeOnClickOverlay="false" :round="10">
				<view class="w650 p30">
					<u--form labelPosition="top" labelWidth="90" :model="info" :rules="rules" ref="uForm">
						<u-form-item label="员工部门" prop="departmentNume" borderBottom @click="departmentShow = true">
							<u--input v-model="info.departmentNume" disabled disabledColor="#ffffff" placeholder="请选择部门"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="员工姓名" prop="name" borderBottom @click="employeeShow = true">
							<u--input v-model="info.name" disabled disabledColor="#ffffff" placeholder="请选择员工"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="生产数量" prop="number" borderBottom>
							<u--input v-model="info.number" type="number" border="none" placeholder="请输入数量"></u--input>
						</u-form-item>
					</u--form>

					<u-picker :show="employeeShow" :columns="[employeeList]" keyName="name"
						@confirm="handleEmployeeConfirm" @close="employeeShow=false"
						@cancel="employeeShow=false"></u-picker>
					<u-picker :show="departmentShow" :columns="[departmentList]" keyName="deptName"
						@confirm="handleDepartmentConfirm" @close="departmentShow=false"
						@cancel="departmentShow=false"></u-picker>

					<view class="jCenter mt30">
						<view class="w200 " style="margin-right: 30rpx;">
							<u-button size="small" @click="handleAddClose" text="取消"></u-button>
						</view>
						<view class="w200">
							<u-button size="small" @click="handleAddConfirm" type="primary" text="确认"></u-button>
						</view>
					</view>
				</view>
			</u-popup>

			<!-- 添加货损 -->
			<u-popup :show="addCargoDamageShow" mode="center" @close="handleCargoDamageClose"
				:closeOnClickOverlay="false" :round="10">
				<view class=" p30" style="width: 650rpx;">
					<u--form labelPosition="top" labelWidth="90" :model="cargoDamageInfo" :rules="cargoDamageRules"
						ref="uCargoDamageForm">
						<u-form-item label="配件名称" prop="name" borderBottom @click="accessoriesShow = true">
							<u--input v-model="cargoDamageInfo.name" disabled disabledColor="#ffffff"
								placeholder="请选择配件名称" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="货损数量" prop="damageNumber" borderBottom>
							<u--input v-model="cargoDamageInfo.damageNumber" type="number" border="none"
								placeholder="请货损数量"></u--input>
						</u-form-item>
						<u-form-item label="货损原因" prop="damageName" borderBottom @click="cargoDamageShow = true">
							<u--input v-model="cargoDamageInfo.damageName" disabled disabledColor="#ffffff"
								placeholder="请选择货损原因" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="责任人/供应商" prop="responsibilityName" borderBottom
							@click="supplierShow = true">
							<u--input v-model="cargoDamageInfo.responsibilityName" disabled disabledColor="#ffffff"
								placeholder="请选择责任人/供应商" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="货损单价" prop="price" borderBottom>
							<u--input v-model="cargoDamageInfo.price" type="number" border="none"
								placeholder="请货损单价"></u--input>
						</u-form-item>
					</u--form>

					<u-picker :show="accessoriesShow" :columns="[accessoriesList]" keyName="product_name"
						@confirm="handleAccessoriesConfirm" @close="accessoriesShow=false"
						@cancel="accessoriesShow=false"></u-picker>


					<u-picker :show="cargoDamageShow" :columns="[cargoDamageList]" keyName="name"
						@confirm="handleCargoDamageConfirm" @close="cargoDamageShow=false"
						@cancel="cargoDamageShow=false"></u-picker>

					<template v-if="cargoDamageInfo.damageType">
						<u-picker :show="supplierShow"
							:columns="cargoDamageInfo.damageType == 1 ? [roleKeyUserList] : [suppliersList]"
							:keyName="cargoDamageInfo.damageType == 1 ? 'nickName' : 'companyName'"
							@confirm="handleSupplierConfirm" @close="supplierShow=false"
							@cancel="supplierShow=false"></u-picker>
					</template>


					<view class="jCenter mt30">
						<view class="w200 " style="margin-right: 30rpx;">
							<u-button size="small" @click="handleCargoDamageClose" text="取消"></u-button>
						</view>
						<view class="w200">
							<u-button size="small" @click="cargoDamageSubmit" type="primary" text="确认"></u-button>
						</view>
					</view>
				</view>
			</u-popup>


			<!-- 提交工费 -->
			<u-modal :show="laborCostShow" @confirm="handlleConfirmSubmission" @cancel="laborCostShow=false"
				showCancelButton title="提示" content='提交工费后，当前所添加的所有工费将无法编辑和删除请确认无误后操作'></u-modal>
			<!-- 工序完结 -->
			<u-modal :show="processShow" @confirm="handleProcessConfirm" @cancel="processShow=false" showCancelButton
				title="提示" :content='submitContent'></u-modal>

			<view class="mt30">
				<u-subsection :list="['组装工费', '录入货损信息']" mode="subsection" :current="curNow"
					@change="handleSubsection"></u-subsection>
			</view>
		</view>


		<view class="list-container">
			<template v-if="curNow == 0">
				<view class="item flex mb20" v-for="(item, index) in staffWagesBos" :key="index">
					<view class="flex-1">
						<view class="name_text">
							员工名称: {{ item.name || '' }}
						</view>
						<view class="name_text">
							生产数量: {{ item.number || 0 }}
						</view>
						<view class="name_text">
							工费总价:￥{{ (Number(item.number) * Number(datails.packagingLaborCost)).toFixed(3) }}
						</view>
					</view>
					<view class="" style="border-left: 1rpx solid #BBBBBB;"></view>
					<view class="flex-1 pl10">
						<view class="name_text" style="color: #FFF;">
							1
						</view>
						<view class="name_text">
							工费单价:￥{{ datails.packagingLaborCost || 0 }}
						</view>
						<view class="name_text flex">
							操作: <u-icon @click="handleEdit(item, index)" color="#69AFF0" size="28"
								style="margin: 0 50rpx;" name="edit-pen"></u-icon>
							<u-icon @click="handleDelete(index)" color="#F75F51" size="28" name="trash-fill"></u-icon>
						</view>
					</view>
				</view>
			</template>
			<template v-else-if="curNow == 1">
				<view class="item mb20" v-for="(item, index) in damageGoodsBos" :key="index">
					<view class="mb20">
						配件名称: {{ item.name || '' }}
					</view>
					<view class="mb20">
						本次货损数量: {{ item.damageNumber || 0 }}
					</view>
					<view class="mb20">
						货损原因: {{ item.damageName || '' }}
					</view>
					<view class="mb20">
						责任人/供应商: {{ item.responsibilityName || '' }}
					</view>
					<view class="mb20">
						货损产品单价: {{ item.price || 0 }}
					</view>

					<view class="flex">
						操作: <u-icon @click="handleCargoDamageEdit(item, index)" color="#69AFF0" size="28"
							style="margin: 0 50rpx;" name="edit-pen"></u-icon>
						<u-icon @click="handleCargoDamageDelete(index)" color="#F75F51" size="28"
							name="trash-fill"></u-icon>
					</view>
				</view>
			</template>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				addShow: false,
				employeeShow: false,
				actions: [],
				employeeList: [],
				info: {
					name: '',
					number: '',
					staffId: '',
					unitPrice: '',
					departmentNume: '',
				},
				cargoDamageInfo: {
					accessoryId: '',
					name: '',
					damageNumber: '',
					damageType: '',
					damageName: '',
					responsibilityId: '',
					responsibilityName: '',
					price: '',
				},
				rules: {
					'number': {
						type: 'string',
						required: true,
						message: '请输入数量',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请选择员工',
						trigger: ['blur', 'change']
					},
				},

				cargoDamageRules: {
					'name': {
						type: 'string',
						required: true,
						message: '请选择配件',
						trigger: ['blur', 'change']
					},
					'damageNumber': {
						type: 'string',
						required: true,
						message: '请输入货损数量',
						trigger: ['blur', 'change']
					},
					'damageName': {
						type: 'string',
						required: true,
						message: '请选择货损原因',
						trigger: ['blur', 'change']
					},
					'responsibilityName': {
						type: 'string',
						required: true,
						message: '请选择责任人/供应商',
						trigger: ['blur', 'change']
					},
					'price': {
						type: 'string',
						required: true,
						message: '请输入货损单价',
						trigger: ['blur', 'change']
					},
				},

				staffWagesBos: [],
				damageGoodsBos: [],
				laborCostShow: false,
				submitContent: '',
				processShow: false,

				addCargoDamageShow: false,

				checked: [],
				curNow: 0,

				ids: '',
				bomId: '',
				datails: {},

				accessoriesShow: false,
				cargoDamageShow: false,
				supplierShow: false,

				accessoriesList: [],
				cargoDamageList: [{
					name: '人为导致',
					id: 1
				}, {
					name: '货品原因',
					id: 2
				}, {
					name: '货品缺失',
					id: 3
				}],

				suppliersList: [],
				roleKeyUserList: [],

				completeNumber: 0,
				editIndex: null,

				relationId: '',

				departmentShow: false,
				departmentList: [],
			}
		},
		onLoad(e) {
			this.ids = e.id
			// this.relationId = e.relationId

			this.getInfo()
			this.getSuppliers()
			this.getResponsiblePerson()
			this.getDepartment()
		},
		methods: {
			handleCargoDamage() {
				this.addCargoDamageShow = true
			},

			/** 工序完结 */
			// 打开完结模拟框
			handleProcessCompletion() {

				if (this.staffWagesBos.length == 0) return this.$msg.error('请至少录入一个组装工费')

				let quantity = 0
				this.staffWagesBos.map(item => quantity += Number(item.number))
				this.completeNumber = quantity
				this.submitContent = '本次完工数量:' + quantity + ',完结后数量无法更改，请确认'
				this.processShow = true
			},

			// 确定完结
			async handleProcessConfirm() {

				const query = {
					id: this.ids,
					relationId: this.relationId,
					// bomId: this.bomId,
					// productId: this.datails.productId,
					// productionOrderId: this.datails.productionOrderId,
					number: this.completeNumber,
					// paperBoxNumber: 0,
					overFlag: this.checked.length,
					damageGoodsBos: this.damageGoodsBos,
					staffWagesBos: this.staffWagesBos,
					// type: this.type,
				}


				try {
					const data = await this.$api.putPackageSubmissionApi(query)
					uni.$u.toast('提交成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} catch (error) {
					//TODO handle the exception
				}


				this.processShow = false
			},

			/** 提交工费 */
			// 打开询问模拟框
			handleSubmitLaborFee() {
				this.laborCostShow = true
			},

			// 确认提交
			handlleConfirmSubmission() {
				this.laborCostShow = false
			},

			/** 添加工费 */

			// 确认添加
			handleAddConfirm() {
				const _this = this
				this.$refs.uForm.validate().then(res => {
					if (_this.editIndex != null) {
						_this.staffWagesBos.splice(_this.editIndex, 1, JSON.parse(JSON.stringify(_this.info)))
					} else {
						_this.staffWagesBos.push({
							..._this.info
						})
					}

					_this.handleAddClose()
					// uni.$u.toast('添加成功')
				}).catch(errors => {

				})
			},

			// 添加货损
			cargoDamageSubmit() {
				const _this = this
				this.$refs.uCargoDamageForm.validate().then(res => {
					if (_this.editIndex != null) {
						_this.damageGoodsBos.splice(_this.editIndex, 1, JSON.parse(JSON.stringify({
							..._this.cargoDamageInfo,
							bomProductId: _this.ids
						})))
					} else {
						_this.damageGoodsBos.push({
							..._this.cargoDamageInfo,
							bomProductId: _this.ids
						})
					}


					_this.handleCargoDamageClose()
					// uni.$u.toast('添加成功')
				}).catch(errors => {

				})
			},

			// 编辑添加的员工
			handleEdit(item, index) {
				this.info = JSON.parse(JSON.stringify(item))
				this.editIndex = index
				this.addShow = true
			},

			handleCargoDamageEdit(item, index) {
				this.cargoDamageInfo = JSON.parse(JSON.stringify(item))
				this.editIndex = index
				this.addCargoDamageShow = true
			},

			// 删除添加的员工
			handleDelete(index) {
				this.staffWagesBos.splice(index, 1)
			},

			handleCargoDamageDelete(index) {
				this.damageGoodsBos.splice(index, 1)
			},

			// 打开弹出层
			handleAdd() {
				this.addShow = true
			},
			// 关闭弹出层
			handleAddClose() {
				this.addShow = false
				this.info.name = ''
				this.info.staffId = ''
				this.info.number = ''
				this.editIndex = null
			},

			handleCargoDamageClose() {
				this.cargoDamageInfo.name = ''
				this.cargoDamageInfo.accessoryId = ''
				this.cargoDamageInfo.damageNumber = ''
				this.cargoDamageInfo.damageType = ''
				this.cargoDamageInfo.damageName = ''
				this.cargoDamageInfo.responsibilityId = ''
				this.cargoDamageInfo.responsibilityName = ''
				this.editIndex = null
				this.addCargoDamageShow = false
			},

			handleEmployeeConfirm({
				value
			}) {
				this.info.name = value[0].name
				this.info.staffId = value[0].id
				this.employeeShow = false
			},

			handleDepartmentConfirm({
				value
			}) {
				this.info.departmentNume = value[0].deptName
				this.getEmployee(value[0].deptId)
				this.departmentShow = false
			},

			handleAccessoriesConfirm({
				value
			}) {
				this.cargoDamageInfo.name = value[0].product_name
				this.cargoDamageInfo.accessoryId = value[0].id
				this.accessoriesShow = false
			},

			handleCargoDamageConfirm({
				value
			}) {
				this.cargoDamageInfo.damageName = value[0].name
				this.cargoDamageInfo.damageType = value[0].id
				this.cargoDamageShow = false
			},

			handleSupplierConfirm({
				value
			}) {
				if (this.cargoDamageInfo.damageType == 1) {
					this.cargoDamageInfo.responsibilityName = value[0].nickName
					this.cargoDamageInfo.responsibilityId = value[0].userId
				} else {
					this.cargoDamageInfo.responsibilityName = value[0].companyName
					this.cargoDamageInfo.responsibilityId = value[0].id
				}

				this.supplierShow = false
			},

			handleSubsection(e) {
				this.curNow = e
			},


			/** 数据获取 */


			async getInfo() {
				try {
					const {
						data
					} = await this.$api.getPackagingInformationApi(this.ids)

					this.datails = data
					this.relationId = data.relationId
					this.info.unitPrice = data.packagingLaborCost
					this.getAccessories()
				} catch (error) {
					//TODO handle the exception
				}
			},

			// 获取全部员工

			async getEmployee(e) {
				try {
					const {
						data
					} = await this.$api.getDepartmentalStaffApi(e)

					this.employeeList = data
				} catch (error) {
					//TODO handle the exception
				}

			},

			// 获取全部部门
			async getDepartment() {
				try {
					const {
						data
					} = await this.$api.getAllDepartmentApi()

					console.log(data, '部门')
					this.departmentList = data
				} catch (error) {
					//TODO handle the exception
				}
			},

			// 获取配件
			async getAccessories() {
				try {
					const {
						data
					} = await this.$api.getPackingRelatedProductApi(this.relationId)
					this.accessoriesList = data
				} catch (error) {
					//TODO handle the exception
				}
			},

			//获取全部供应商列表
			async getSuppliers() {
				try {
					const {
						data
					} = await this.$api.getSuppliersApi('1')

					this.suppliersList = data
				} catch (error) {
					//TODO handle the exception
				}
			},

			// 获取责任人
			async getResponsiblePerson() {
				try {
					const {
						data
					} = await this.$api.getUserListByRole('business_role')

					this.roleKeyUserList = data
				} catch (error) {
					//TODO handle the exception
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
			this.$refs.uCargoDamageForm.setRules(this.cargoDamageRules)

		},
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 或者使用 100% */

		.content {
			flex: 0 0 auto;
		}

		.list-container {
			flex: 1;
			overflow: auto;
			padding-top: 50rpx;

			.item {
				border-radius: 10rpx;
				border: 1rpx solid #BBBBBB;
				background-color: #FFF;
				padding: 20rpx;


				.name_text {
					font-weight: bold;
					margin-bottom: 30rpx;
				}
			}
		}
	}
</style>